/*
 * @Author: your name
 * @Date: 2021-12-24 17:34:38
 * @LastEditTime: 2021-12-24 17:50:00
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day12 ts 路由 月考\my-app\src\component\Mask.tsx
 */
import React, { Component } from 'react'

import oneModule from "./ones.module.scss"
import {connect} from "react-redux"

import {changestore} from "../store/indexaction"

interface IProps{
    newCon:string[],
    flagchange:()=>void,
    info:string,
    changeStore:(info:string,index:number)=>void
}

class Mask extends Component<IProps> {

    changeList(index:number){
        let {info}=this.props
        this.props.flagchange()
        this.props.changeStore(info,index+1)
    }

    render() {
        let {newCon}=this.props
        return (
            <ul className={oneModule.uls}>
                {
                    newCon&&newCon.length?newCon.map((item,index)=>{
                        return <li key={index} onClick={this.changeList.bind(this,index)}>{item}</li>
                    }):<div>暂无数据</div>
                }
            </ul>
        )
    }
}

export default connect((state)=>{
    return {
        ...state
    }
},(dispatch)=>{
    return {
        changeStore(info:string,index:number){
            dispatch(changestore(info,index))
        }
    }
})(Mask)
